/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018-11-27 Time: 21:10
 *
 * 网评列表
 */

import React, {Component} from 'react';
import {
  SafeAreaView,
  View,
  Text
} from 'react-native';
import {connect} from 'react-redux';
import ScrollableTabView, {DefaultTabBar} from 'react-native-scrollable-tab-view';
import DateDisplayView from "../../../component/DateDisplayView/DateDisplayView";
import {styles} from './OnlineReviewListScreen.Style';
import DividingLineViewComponent from "../../../component/DividingLineViewComponent/DividingLineViewComponent"
import {COLOR_THEME, FONT_COLOR_SUB_TITLE} from "../../../constant/PHColors"
import {SCREEN_WIDTH} from "../../../constant/PHScreen"
import ReviewListView from "./component/ReviewListView/ReviewListView"
import LowerScoreListView from "./component/LowerScoreListView/LowerScoreListView"

class OnlineReviewListScreen extends Component {

  static navigationOptions = {
    title: `网评列表`
  };

  // 构造
  constructor(props) {
    super(props);
    // 初始状态
    this.state = {};
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>

        <DateDisplayView
          leftText={'11.12-11.18'}
          onClickLeft={() => {
          }}
        />

        <DividingLineViewComponent lineHeight={5}/>

        {/* 平均评分与总评分 */}
        <View style={styles.topView}>
          <View style={styles.topCellView}>
            <View style={styles.topLeftView}>
              <Text style={styles.topCellNormalText}>
                {'携程客人\n平均评分'}
              </Text>
            </View>
            <View style={styles.topRightView}>
              <Text style={styles.topCellNumberText}>
                4.6
                <Text style={styles.topCellOtherText}>
                  分
                </Text>
              </Text>
            </View>
          </View>
          <View style={styles.topCellView}>
            <View style={styles.topLeftView}>
              <Text style={styles.topCellNormalText}>
                {'酒店\n总评分'}
              </Text>
            </View>
            <View style={styles.topRightView}>
              <Text style={styles.topCellNumberText}>
                4.6
                <Text style={styles.topCellOtherText}>
                  分
                </Text>
              </Text>
            </View>
          </View>
        </View>

        <DividingLineViewComponent lineHeight={5}/>

        {/* 列表 */}
        <ScrollableTabView
          style={{marginTop: 10}}
          renderTabBar={() => <DefaultTabBar style={{height: 30}}/>}
          tabBarUnderlineStyle={{backgroundColor: COLOR_THEME, height: 2, width: SCREEN_WIDTH / 4, marginLeft: SCREEN_WIDTH / 8}}
          tabBarActiveTextColor={COLOR_THEME}
          tabBarInactiveTextColor={FONT_COLOR_SUB_TITLE}
          tabBarTextStyle={{fontSize: 14}}
          scrollWithoutAnimation={true}
          locked={true}
        >
          <ReviewListView tabLabel="携程网评"/>
          <LowerScoreListView tabLabel="评分较低(0)"/>
        </ScrollableTabView>



      </SafeAreaView>
    )
  }

}

const props = state => {
  return {}
};

export default OnlineReviewListScreen = connect(props)(OnlineReviewListScreen);